前端练习项目gulp配置

记录下学习过程使用gulp的一些经验

---

我的文件夹目录是这样的

|-- project
    |-- child-project
        |-- src
            |-- html
            |-- less
            |-- js
            |-- img
        |-- dist
            |-- html
            |-- css
            |-- js
            |-- img

功能需求如下

• 在 project任意子目录下修改less文件后自动编译在对应项目文件夹的css文件夹下
• 在 project任意子目录下修改html、js、less文件后都自动刷新浏览器

2017-12-14

• 增加了压缩文件的需求，需要将src中的js文件/img/css文件进行压缩，压缩至dist文件夹下
• 增加了检查js代码

实际配置

//编译与刷新浏览器
    //导入工具包
var gulp = require('gulp'),
    less = require('gulp-less'),
    browserSync = require('browser-sync').create(),
    browserReload = browserSync.reload,
    rename = require('gulp-rename');

//定义less编译任务
gulp.task('lessCompile', function() {
    gulp.src('./project/**/*.less') //该任务针对的文件
        .pipe(less())//该任务调用的模块
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace('less', 'css');
        }))
        .pipe(gulp.dest('./project'))
        .pipe(browserReload({stream: true}));
});

//监听 本地 less/html/js 文件
gulp.task('serve', function(){
    //监听本地文件
    browserSync.init({
        server: {
            baseDir: "./project",
            directory: true
        }
    });
    //监听less
    gulp.watch("./project/**/*.less", ['lessCompile']);
    //监听html
    gulp.watch("./project/**/*.html").on('change', browserReload);
    //监听js
    gulp.watch("./project/**/*.js").on('change', browserReload);
    
}); 

//定义默认任务
gulp.task('default', ['serve']);

---

//代码检查和压缩
gulp.task('jsHint', function() {
    gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//检查的文件，忽略dist中的js文件
        .pipe(jshint(jshintConfig))//检查
        .pipe(jshint.reporter('default')); // 输出检查结果
});
//定义js压缩任务（css与img同此，更换插件即可）
gulp.task('jsmin', function() {
    gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//压缩的文件，忽略dist中的js文件
        .pipe(uglify())//压缩
        //.pipe(rename({suffix:'.min'}))//增加min后缀
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace('src', 'dist');
        }))//压缩至dist文件夹
        .pipe(gulp.dest('./project'));
});

参考学习

http://www.cnblogs.com/2050/p...，src与dest的路径学习参考此文
http://www.ydcss.com/archives/18 gulp的详细入门指南
http://blog.csdn.net/u0137205... jshint的参数的配置